泡者，由介面活性劑包裹空氣而形之，其色彩斑斕，絢爛奪目，並向上緩浮，世人稱是為，美麗的泡泡。

圖片來源：派星機
所以說為什麼派星機這麼好用

本篇將嘗試針對前篇提及之發泡現象作說明與操術示例。

Event bubbling

發泡現象為因元素之階層狀態而產生之現象。當事件觀測器設定於父元素，然而使用者於子元素觸發事件時，即有發泡現象之可能。

首先呼出三顆元素泡泡，分別為泡泡爺、泡泡爸、泡泡子，三元素之層疊架構如下，其中泡泡爺為泡泡爸之父元素，泡泡爸為泡泡子之父元素，泡如其名。

<div class="bubble-grandparent" name="泡泡爺">
  <span>泡泡爺</span>
  <div class="bubble-parent" name="泡泡爸">
    <span>泡泡爸</span>
    <div class="bubble-child" name="泡泡子">
        <span>泡泡子</span>
    </div>
  </div>
</div>

接著將事件觀測器設於泡泡爺元素，使鼠輩移入元素時觸發mouseover事件，並於泡群下方顯示鼠輩碰觸之對象。

const bubbleGrandparent = document.querySelector(".bubble-grandparent");
const target = document.querySelector(".target");

function showTarget() {
  const targetName = this.attributes.name.value;
  console.log(targetName);
  target.innerHTML += `<p>鼠輩碰觸了${targetName}<p>`;
}

bubbleGrandparent.addEventListener("mouseover", showTarget);

分段註釋如下：
選擇泡泡爺元素以及泡群下方顯示處。

const bubbleGrandparent = document.querySelector(".bubble-grandparent");
const target = document.querySelector(".target");

定義函式之術名showTarget，術式內容為顯示鼠輩碰觸之對象，並同時於操術板印出。

function showTarget() {
  const targetName = this.attributes.name.value;
  target.innerHTML += `<p>鼠輩碰觸了${targetName}<p>`;
  console.log(targetName);
}

最後設定事件觀測器於泡泡爺，觀測mouseover事件之發生。

bubbleGrandparent.addEventListener("mouseover", showTarget);

無論鼠輩移入泡泡爺、泡泡爸或泡泡子，皆可觸發mouseover事件，於下方顯示鼠輩觸碰了泡泡爺。由此得知，泡泡爸或泡泡子皆屬於泡泡爺的一部分。

若設立相同之事件觀測器於泡泡爸與泡泡子，觀測三代泡泡之mouseover事件：

const bubbleGrandparent = document.querySelector(".bubble-grandparent");
const bubbleParent = document.querySelector(".bubble-parent");
const bubbleChild = document.querySelector(".bubble-child");
const target = document.querySelector(".target");

function showTarget() {
  const targetName = this.attributes.name.value;
  console.log(targetName);
  target.innerHTML += `<p>鼠輩碰觸了${targetName}<p>`;
}

bubbleGrandparent.addEventListener("mouseover", showTarget);
bubbleParent.addEventListener("mouseover", showTarget);
bubbleChild.addEventListener("mouseover", showTarget);

觀察鼠輩碰觸泡泡子後之狀態，可發現下方顯示處之順序為，碰觸泡泡子→碰觸泡泡爸→碰觸泡泡爺。

示例處

如斯由子元素向上至父元素觸發事件之情形，如同泡泡般向上緩浮之行為，即被世人稱為發泡現象。而此現象之發生，則緣於事件流之順序機制，將於後篇進一步說明之。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day07

翻譯

發泡現象：event bubbling
元素：element
父元素：ancestor elements
子元素：descendent elements
事件觀測器：event listener
鼠輩：滑鼠
操術板：開發者工具
事件流：event flow

相關連結

• Event bubbling - MDN